<template>
  <div class="user">
    <!-- 按钮开始 -->
     <!-- --------------- -->
    <el-button size="small" type="primary" @click="toAdd">添加</el-button>
     <!-- ----------------- -->
    <!-- 按钮结束 -->

    <!-- 输入框开始  -->
    <el-input
      class="input_name"
      size="small"
      type="text"
      autocomplete="off"
      v-model="list2.username"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
    >
    </el-input>
    <!-- 输入框结束 -->
    <!-- 选择器开始 -->
    <el-select
      v-model="list2.rolename"
      clearable
      placeholder="请选择"
      size="small"
    >
      <el-option
        v-for="item in role"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{
          item.value
        }}</span>
      </el-option>
    </el-select>
    <el-button @click="searchHandler" size="small" type="text" class="Handler"
      >搜索</el-button
    >

    <!-- 选择器结束 -->

    <!-- 表格开始 -->
    <!-- //---------------------------------------- -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="序号" width="100"> </el-table-column>
      <el-table-column prop="username" label="用户名" width="150">
      </el-table-column>
      <el-table-column prop="realname" label="姓名" width="150">
      </el-table-column>
      <el-table-column prop="roles" label="角色" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.roles.length != 0">{{
            scope.row.roles[0].name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.gender.name == male">{{
            (scope.row.gender = "男")
          }}</span>
          <span v-else-if="scope.row.gender == female">
            {{ (scope.row.gender = "女") }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="150">
      </el-table-column>
      <el-table-column prop="telephone" label="手机号" width="160">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" >设置</el-button>

          <el-button
            @click="handleDelete(scope.row.id)"
            type="text"
            size="small"
            >删除</el-button
          >
          <!-- <el-button type="text" size="small">编辑</el-button> -->
          <el-button type="text" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- //---------------------------------------- -->

    <!-- 表格结束 -->

    <!-- ------------------------------------------- -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="male"></el-option>
            <el-option label="女" value="female"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input
            v-model="form.telephone"
            autocomplete="off"
            maxlength="11"
            type="text"
            show-word-limit
            clearable="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="MakeSure">
      <div slot="footer" class="dialog-footer">
        <el-button @click="MakeSure = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete">确 定</el-button>
      </div>
    </el-dialog>
    <!-- -------------------------------------------------- -->
  </div>
</template>
<style>
/* 定义盒子 */
.user {
  min-height: 800px;
  background-color: #fff;
  border-radius: 5px;
  padding: 0.5em;
}
.user .input_name {
  width: 15%;

  margin-left: 30px;
}
.user .select {
  width: 15%;
  margin-left: 10px;
}
.user .search {
  margin-left: 15px;
}
</style>
<script>
// import { get } from 'js-cookie';
// import { get } from '@utils/request'
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      list2: {
        page: 1,
        pageSize: 100
      },
      // --------
      form: {},
      formLabelWidth: "90px",
      title: "添加用户",
      dialogFormVisible: false,
      // --------
      // 1-------
      role: [
        {
          value: "导师",
          label: "导师"
        },
        {
          value: "管理员",
          label: "管理员"
        },
        {
          value: "学生",
          label: "学生"
        }
      ],
      value: "",

      input: "",

      tableData: []
    };
  },
  methods: {
     handleEdit(row) {
      this.dialogFormVisible = true;
      this.title = "编辑信息";
      this.form = row;
    },
    // <!-- //---------------------------------------- -->
    toAdd() {
      this.dialogFormVisible = true;
    },
    //提交用户信息
    submit() {
      post("/baseUser/saveOrUpdate", this.form).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.dialogFormVisible = false;
          this.$message({
            type: "success",
            message: res.message
          });
          this.findAllUser();
        }
      });
    },

    handleClick(row) {
      console.log(row);
    },
    handleDelete(id) {
      get("/baseUser/deleteById?id=" + id).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.findAllUser();
          this.$message({
            type: "success",
            message: res.message
          });
        } else {
          this.$message({
            type: "error",
            message: res.message
          });
        }
      });
    },
    // handleDelete() {
    //   this.MakeSure=true
    //   this.title='删除信息'
    // },
    // <!-- //---------------------------------------- -->

    indexMethod(index) {
      return index * 2;
    },
    findAllUser() {
      get("/baseUser/pageQuery", this.list2).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.tableData = res.data.list;
        } else {
          this.$message({
            type: "error",
            message: res.message
          });
        }
      });
    },
    searchHandler() {
      this.findAllUser();
    }
  },
  created() {
    this.findAllUser();
  }
};
</script>
